const barOption = function(x, y) {
	return {
		tooltip: {
			show: false,
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
		},
		grid: {
			top: '25%',
			left: '3%',
			right: '2%',
			bottom: '2%',
			containLabel: true,
		},
		xAxis: [
			{
				type: 'category',
				data: x,
				axisTick: {
					alignWithLabel: true,
				},
				axisLabel: {
					color: '#eee',
				},
			},
		],
		yAxis: [
			{
				type: 'value',
				name: '人数',
				nameTextStyle: {
					color: '#eee',
					align: 'center',
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: '#ccc',
						opacity: 0.6,
					},
				},
				axisLabel: {
					color: '#eee',
				},
			},
		],
		series: [
			{
				type: 'bar',
				barWidth: '30%',
				data: y,
			},
		],
	};
};
const personColors = [
	['rgb(97, 252, 255,1)', 'rgb(97, 252, 255, 0.1)'],
	['rgb(59,172,255,1)', 'rgb(59,172,255, 0.1)'],
	['rgb(81, 135, 255,1)', 'rgb(81, 135, 255, 0.1)'],
	['rgb(6,108,183,1)', 'rgb(6,108,183, 0.1)'],
];

export const personOption = (data = []) => {
	const list = data.map((item, index) => {
		return {
			value: item,
			itemStyle: {
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: personColors[index][0], // 0% 处的颜色
						},
						{
							offset: 1,
							color: personColors[index][1], // 100% 处的颜色
						},
					],
					global: false, // 缺省为 false
				},
			},
		};
	});

	// return barOption(['正常', '低危', '中危', '高危'], list);
	return barOption(['正常', '预警', '报警'], list);
};

const weightColors = [
	['rgb(77, 235, 255,1)', 'rgb(77, 235, 255, 0.1)'],
	['rgb(127, 222, 151,1)', 'rgb(127, 222, 151, 0.1)'],
	['rgb(255, 226, 102,1)', 'rgb(255, 226, 102, 0.1)'],
	['rgb(255, 158, 77,1)', 'rgb(255, 158, 77, 0.1)'],
	['rgb(230, 58, 58,1)', 'rgb(230, 58, 58, 0.1)'],
];
export const weightOption = (data = []) => {
	const list = data.map((item, index) => {
		return {
			value: item,
			itemStyle: {
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: weightColors[index][0], // 0% 处的颜色
						},
						{
							offset: 1,
							color: weightColors[index][1], // 100% 处的颜色
						},
					],
					global: false, // 缺省为 false
				},
			},
		};
	});

	return barOption( ["过轻","正常","疲劳","极度疲劳"], list);
	// return barOption(['过轻', '健康', '过重', '肥胖', '极度肥胖'], list);
};
const colors = ['#61fcff', '#FF9E4D'];
export const lineOption = (xData, yData, rateData) => {
	return {
		color: colors,
		tooltip: {
			trigger: 'axis',
		},
		legend: {
			show: true,
			top: '5%',
			textStyle: {
				color: '#eee',
			},
		},
		grid: {
			bottom: '10%',
			left: '8%',
			right: '5%',
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: xData,
			splitLine: {
				show: false,
			},
			axisTick: {
				show: false,
			},
			axisLine: {
				lineStyle: {
					color: '#ccc',
				},
			},
			axisLabel: {
				margin: 8,
				textStyle: {
					fontSize: 14,
					color: '#eee',
				},
			},
		},
		yAxis: [
			{
				type: 'value',
				name: '睡眠',
				nameTextStyle: {
					color: '#eee',
				},
				splitLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
				axisLine: {
					show: false,
				},
				axisLabel: {
					margin: 8,
					formatter(value) {
						return (value / 1000).toFixed(1);
					},
					textStyle: {
						fontSize: 14,
						color: '#eee',
					},
				},
			},
			{
				type: 'value',
				name: '心率',
				nameTextStyle: {
					color: '#eee',
				},
				splitLine: {
					lineStyle: {
						color: '#ddd',
					},
				},
				min: 0,
				max: 200,
				interval: 40,
				axisTick: {
					show: false,
				},
				axisLine: {
					show: false,
				},

				axisLabel: {
					margin: 8,
					textStyle: {
						fontSize: 14,
						color: '#eee',
					},
				},
			},
		],
		series: [
			{
				name: '睡眠',
				type: 'line',
				smooth: true,
				showSymbol: false,
				data: yData,
				yAxisIndex: 0,
				lineStyle: {
					normal: {
						width: 2,
					},
				},
			},
			{
				name: '心率',
				type: 'line',
				smooth: true,
				showSymbol: false,
				data: rateData,
				yAxisIndex: 1,
				lineStyle: {
					normal: {
						width: 2,
					},
				},
			},
		],
	};
};

export const barMoreOption = function(x, y) {
	const series = y.map(({ name, data, color0, color1 }) => {
		return {
			name: name,
			type: 'bar',
			data: data,
			itemStyle: {
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [
						{
							offset: 0,
							color: color0, // 0% 处的颜色
						},
						{
							offset: 1,
							color: color1, // 100% 处的颜色
						},
					],
					global: false, // 缺省为 false
				},
			},
		};
	});
	return {
		tooltip: {
			show: false,
			trigger: 'axis',
			axisPointer: {
				type: 'shadow',
			},
		},
		grid: {
			top: '25%',
			left: '3%',
			right: '2%',
			bottom: '2%',
			containLabel: true,
		},
		xAxis: [
			{
				type: 'category',
				data: x,
				axisTick: {
					alignWithLabel: true,
				},
				axisLabel: {
					color: '#eee',
				},
			},
		],
		yAxis: [
			{
				type: 'value',
				name: '人数',
				minInterval: 1,
				nameTextStyle: {
					color: '#eee',
					align: 'center',
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: '#ccc',
						opacity: 0.6,
					},
				},
				axisLabel: {
					color: '#eee',
				},
			},
		],
		series: series,
	};
};

export const pieOption = (data) => {
	return {
		color: [
			'rgba(4, 94, 215, 1)',
			'rgba(0, 158, 225, 1)',
			'rgba(77, 214, 255, 1)',
			'rgba(79, 255, 240, 1)',
			'rgba(97, 204, 125, 1)',
		],
		title: {
			show: false,
		},
		legend: {
			show: false,
		},
		series: [
			{
				name: '运动损伤监测',
				type: 'pie',
				radius: '50%',
				data: data,
				label: {
					show: false,
				},
				labelLine: {
					show: false,
				},
				radius: [0, '90%'],
			},
		],
	};
};

export const sportOption = (baseData, data) => {
	const list = data.map((item, index) => {
		const color = colors[index];
		return {
			value: item.data,
			name: item.name,
			itemStyle: {
				normal: {
					lineStyle: {
						color,
					},
					shadowColor: color,
					shadowBlur: 10,
				},
			},
			areaStyle: {
				normal: {
					// 单项区域填充样式
					color: {
						type: 'linear',
						x: 0, //右
						y: 0, //下
						x2: 1, //左
						y2: 1, //上
						colorStops: [
							{
								offset: 0,
								color: color,
							},
							{
								offset: 0.5,
								color: 'rgba(0,0,0,0)',
							},
							{
								offset: 1,
								color: color,
							},
						],
						globalCoord: false,
					},
					opacity: 1, // 区域透明度
				},
			},
		};
	});
	return {
		title: {
			show: false,
		},
		color: colors,
		legend: {
			textStyle: {
				color: '#eee',
			},
			right: '5%',
			itemWidth: 10,
			itemHeight: 10,
			icon: 'circle',
		},
		radar: {
			radius: '60%',
			indicator: baseData,
			axisName: {
				color: '#eee',
				rich: {
					align: 'center',
					a: {
						fontSize: 12,
						color: '#fff',
						backgroundColor: '#36a7bf',
						padding: [3, 3, 1, 3],
						borderRadius: 2,
					},
					b: {
						color: '#3bacff',
						fontSize: 14,
						padding: [5, 0, 0, 0],
						fontWeight: 'bold',
					},
					c: {
						color: '#3bacff',
						fontSize: 12,
						padding: [8, 0, 0, 0],
					},
				},
				formatter(text) {
					const [name, value] = text.split('|');
					var company = "";
					return `{a| ${name}}\n{b| ${value}}{c| ${company}}`;
				},
			},
			splitArea: {
				show: true,
				areaStyle: {
					color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'],
				},
			},
			axisLine: {
				lineStyle: {
					color: '#153269',
				},
			},
			splitLine: {
				lineStyle: {
					color: '#113865',
					width: 1,
				},
			},
		},
		series: [
			{
				type: 'radar',
				symbolSize: 4,
				data: list,
			},
		],
	};
};
